<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8">
		<title>Static Master/Detail Pattern -- Search Results example</title>

		<script src="../../../../dojo/dojo.js"
				type="text/javascript"
				djConfig="parseOnLoad: true, isDebug: true">
		</script>
		<style type="text/css">
			@import "css/app-format.css";
			@import "../../../../dijit/themes/claro/claro.css";
		</style>
		<script type="text/javascript">
		  dojo.require("dojox.mvc");
		  dojo.require("dojox.mvc.Group");
		  dojo.require("dojox.mvc.Repeat");
		  dojo.require("dijit.form.TextBox");
		  dojo.require("dijit.form.Button");
		  dojo.require("dojo.parser");

		  // Initial raw records for the master detail
		  var search_results_init =
			{
				"Query" : "Engineers",
				"Results" : [
					{
						"First"	  : "Anne",
						"Last"	  : "Ackerman",
						"Location": "NY",
						"Office"  : "1S76",
						"Email"	  : "a.a@test.com",
						"Tel"	  : "123-764-8237",
						"Fax"	  : "123-764-8228"
					},
					{
						"First"	  : "Ben",
						"Last"	  : "Beckham",
						"Location": "NY",
						"Office"  : "5N47",
						"Email"	  : "b.b@test.com",
						"Tel"	  : "123-764-8599",
						"Fax"	  : "123-764-8600"
					},
					{
						"First"	  : "Chad",
						"Last"	  : "Chapman",
						"Location": "CA",
						"Office"  : "1278",
						"Email"	  : "c.c@test.com",
						"Tel"	  : "408-764-8237",
						"Fax"	  : "408-764-8228"
					},
					{
						"First"	  : "David",
						"Last"	  : "Durham",
						"Location": "NJ",
						"Office"  : "C12",
						"Email"	  : "d.d@test.com",
						"Tel"	  : "514-764-8237",
						"Fax"	  : "514-764-8228"
					},
					{
						"First"	  : "Emma",
						"Last"	  : "Eklof",
						"Location": "NY",
						"Office"  : "4N76",
						"Email"	  : "e.e@test.com",
						"Tel"	  : "123-764-1234",
						"Fax"	  : "123-764-4321"
					},
					{
						"First"	  : "Fred",
						"Last"	  : "Fisher",
						"Location": "NJ",
						"Office"  : "V89",
						"Email"	  : "f.f@test.com",
						"Tel"	  : "514-764-8567",
						"Fax"	  : "514-764-8000"
					},
					{
						"First"	  : "George",
						"Last"	  : "Garnett",
						"Location": "NY",
						"Office"  : "7S11",
						"Email"	  : "gig@test.com",
						"Tel"	  : "123-999-8599",
						"Fax"	  : "123-999-8600"
					},
					{
						"First"	  : "Hunter",
						"Last"	  : "Huffman",
						"Location": "CA",
						"Office"  : "6532",
						"Email"	  : "h.h@test.com",
						"Tel"	  : "408-874-8237",
						"Fax"	  : "408-874-8228"
					},
					{
						"First"	  : "Irene",
						"Last"	  : "Ira",
						"Location": "NJ",
						"Office"  : "F09",
						"Email"	  : "i.i@test.com",
						"Tel"	  : "514-764-6532",
						"Fax"	  : "514-764-7300"
					},
					{
						"First"	  : "John",
						"Last"	  : "Jacklin",
						"Location": "CA",
						"Office"  : "6701",
						"Email"	  : "j.j@test.com",
						"Tel"	  : "408-764-1234",
						"Fax"	  : "408-764-4321"
					}
				]
			};

		   // The dojox.mvc.StatefulModel class creates a data model instance
		   // where each leaf within the data model is decorated with dojo.Stateful
		   // properties that widgets can bind to and watch for their changes.
		   var searchRecords = dojox.mvc.newStatefulModel({ data : search_results_init });
		 </script>
	</head>
	<body class="claro" style="background-image: url(images/master_detail.png)">
		<div id="wrapper">
		<div id="header">
		  <div id="navigation">
		  </div>
		  <div id="headerInsert">
			<h1>Employee Search</h1>
			<h2>Master Detail Example - Repeat with insert and delete.</h2>
		  </div>
		</div>
		<div id="main">
		 <div id="leftNav">
		 </div>
		 <div id="mainContent">
			<div class="row">
			<div class="spacer"></div>
				<button type="button" data-dojo-type="dijit.form.Button" data-dojo-props="onClick: function(){console.log(searchRecords.Results.toPlainObject());searchRecords.Results.commit();;}">Commit All</button>        
				<button type="button" data-dojo-type="dijit.form.Button" data-dojo-props="onClick: function(){searchRecords.Results.reset();}">Reset to last saved</button>        
			</div>
		 <!--
			 The group container denotes some logical grouping of widgets and also serves
			 to establish a parent data binding context for its children.
			 The ref attribute for the outermost container obtains the binding from the
			 "page scope" itself.
		 -->
		 <div data-dojo-type="dojox.mvc.Group" data-dojo-props="ref: 'searchRecords'">
			<div class="row">
				<label class="cell" for="queryInput">Search for:</label>
				<input class="cell" id="queryInput" data-dojo-type="dijit.form.TextBox" data-dojo-props="ref: 'Query'"/>
				<button type="button" data-dojo-type="dijit.form.Button" data-dojo-props="onClick: function(){setSearchBanner();}">Search</button>
			</div>
			<div class="spacer"></div>

			<div id="searchBanner">Search Results for term: Engineers</div>

			<!--
				The repeat container denotes a templated UI that operates over a collection
				of data records.
				The UI can be customized for each iteration using properties such as
				${this.index} for the iteration index.
			-->
			<div data-dojo-type="dojox.mvc.Repeat" data-dojo-props="ref: 'Results'">
				<div class="row" data-dojo-type="dojox.mvc.Group" data-dojo-props="ref: '${this.index}'">
					<label class="cell" for="nameInput${this.index}">Name:</label>
					<input class="cell" data-dojo-type="dijit.form.TextBox" id="nameInput${this.index}" data-dojo-props="ref: 'First'"/>
					<button type="button" data-dojo-type="dijit.form.Button" data-dojo-props="onClick: function(){setDetailsContext('${this.index}');}">Details</button>
					<button type="button" data-dojo-type="dijit.form.Button" data-dojo-props="onClick: function(){insertResult('${this.index}');}">+</button>
					<button type="button" data-dojo-type="dijit.form.Button" data-dojo-props="onClick: function(){deleteResult('${this.index}');}">-</button>
				</div>
			</div>
			<div class="spacer"></div>

			<div data-dojo-type="dojox.mvc.Group" data-dojo-props="ref: 'Results'">
				<div id="detailsBanner">Details for result index: 0</div>

				<div id="detailsGroup" data-dojo-type="dojox.mvc.Group" data-dojo-props="ref: '0'">
					<div class="row">
						<label class="cell" for="firstInput">First Name:</label>
						<input class="cell" id="firstInput" data-dojo-type="dijit.form.TextBox" data-dojo-props="ref: 'First'"/>
					</div>
					<div class="row">
						<label class="cell" for="lastInput">Last Name:</label>
						<input class="cell" id="lastInput" data-dojo-type="dijit.form.TextBox" data-dojo-props="ref: 'Last'"/>
					</div>
					<div class="row">
						<label class="cell" for="locationInput">Location:</label>
						<input class="cell" id="locationInput" data-dojo-type="dijit.form.TextBox" data-dojo-props="ref: 'Location'"/>
					</div>
					<div class="row">
						<label class="cell" for="officeInput">Office:</label>
						<input class="cell" id="officeInput" data-dojo-type="dijit.form.TextBox" data-dojo-props="ref: 'Office'"/>
					</div>
					<div class="row">
						<label class="cell" for="emailInput">Email:</label>
						<input class="cell" id="emailInput" data-dojo-type="dijit.form.TextBox" data-dojo-props="ref: 'Email'"/>
					</div>
					<div class="row">
						<label class="cell" for="telInput">Telephone:</label>
						<input class="cell" id="telInput" data-dojo-type="dijit.form.TextBox" data-dojo-props="ref: 'Tel'"/>
					</div>
					<div class="row">
						<label class="cell" for="faxInput">Fax:</label>
						<input class="cell" id="faxInput" data-dojo-type="dijit.form.TextBox" data-dojo-props="ref: 'Fax'"/>
					</div>
				</div>
			</div>
		   </div>
		 </div>
		</div>
		<script type="text/javascript">
			function setDetailsContext(index) {
				var widget = dijit.byId("detailsGroup");
				widget.set("ref", index);
				var detailsBanner = dojo.byId("detailsBanner");
				detailsBanner.innerHTML = "Details for result index: " + index;
			}
			function insertResult(index) {
				var insert = dojox.mvc.newStatefulModel({ "data" : {
					"First"	  : "",
					"Last"	  : "",
					"Location": "",
					"Office"  : "",
					"Email"	  : "",
					"Tel"	  : "",
					"Fax"	  : ""
				} });
				searchRecords.Results.add(parseInt(index)+1, insert);
			}
			function deleteResult(index) {
				searchRecords.Results.remove(index);
			}
			function setSearchBanner() {
				var searchBanner = dojo.byId("searchBanner");
				searchBanner.innerHTML = "Search Results for term: " + searchRecords.Query.get("value");
			}
		</script>
	</body>
</html>
